import React from 'react'
import Link from 'next/link'
import Router, {withRouter} from 'next/router'
import {format} from 'url'

let counter = 1;

class Index extends React.Component {
  static getInitialProps({res}) {

    if (res) { // 表名是服务端渲染 直接请求的该页面 而不是前端路由跳转时触发的 getInitialProps
      return {initialPropsCounter: 1}
    }

    counter++;
    return {
      initialPropsCounter: counter,
    }
  }

  /** shallow默认为false,故点击reload会触发getInitialProps*/
  reload() {
    const {pathname, query} = Router;
    Router.push(format({pathname, query}));
  }

  /** shallow置为true,点击会触发getInitialProps方法*/
  incrementStateCounter() {
    const {router} = this.props;
    const currentCounter = router.query.counter
      ? parseInt(router.query.counter)
      : 0;
    const href = `/shadow?counter=${currentCounter + 1}`;
    Router.push(href, href, {shallow: true})
  }

  render() {
    const {initialPropsCounter, router} = this.props;

    return (
      <div>
        <h2>This is the shadow test Page</h2>
        <Link href="/about">
          <a>About</a>
        </Link>
        <button onClick={() => this.reload()}>Reload</button>
        <button onClick={() => this.incrementStateCounter()}>
          Change State Counter
        </button>
        <p>"getInitialProps" ran for "{initialPropsCounter}" times.</p>
        <p>
          Counter: "{router.query.counter || 0}
          ".
        </p>
      </div>
    )
  }
}

export default withRouter(Index)
